/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import {StatusBar} from 'react-native';
import {NavigationContainer, RouteProp} from '@react-navigation/native';
import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {NativeStackScreenProps} from 'react-native-screens/lib/typescript/native-stack/types';
import Welcome from './src/pages/Welcome';
import Login from './src/pages/Login';
import MainTab from './src/pages/MainTab';
import ArticleDetail from './src/pages/ArticleDetail';
import SearchGoods from './src/pages/SearchGoods';

const Stack = createStackNavigator();
//Stack 所有的Screen名称
export type RootStackParamList = {
  Welcome: undefined;
  Login: undefined;
  MainTab: undefined;
  ArticleDetail: {id: number};
  SearchGoods: undefined;
};

//我的理解就是上面的RootStackParamList的一个Copy
export type RootStackScreenProps<Screen extends keyof RootStackParamList> =
  NativeStackScreenProps<RootStackParamList, Screen>;

//定义Interactive页面路由跳转
export type ArticleDetailRouteProp = RouteProp<
  RootStackParamList,
  'ArticleDetail'
>;

function App(): React.JSX.Element {
  return (
    <SafeAreaProvider style={{width: '100%', height: '100%'}}>
      <StatusBar barStyle={'dark-content'} backgroundColor={'white'} />
      <NavigationContainer>
        <Stack.Navigator
          initialRouteName="Welcome"
          screenOptions={{
            cardStyle: {elevation: 1},
          }}>
          <Stack.Screen
            name="Welcome"
            component={Welcome}
            options={{
              headerShown: false,
            }}
          />
          <Stack.Screen
            name="Login"
            component={Login}
            options={{
              headerShown: false,
              ...TransitionPresets.SlideFromRightIOS,
            }}
          />
          <Stack.Screen
            name="MainTab"
            component={MainTab}
            options={{
              headerShown: false,
              ...TransitionPresets.SlideFromRightIOS,
            }}
          />
          <Stack.Screen
            name="ArticleDetail"
            component={ArticleDetail}
            options={{
              headerShown: false,
              ...TransitionPresets.SlideFromRightIOS,
            }}
          />
          <Stack.Screen
            name="SearchGoods"
            component={SearchGoods}
            options={{
              headerShown: false,
              presentation: 'transparentModal',
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

export default App;
